<template>
  <div>
    <!-- 搜索区域 -->
    <div class="search_box">
      <el-form ref="searchFormRef" :model="queryInfo" label-width="120px" class="search-box">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item prop="order_no" label="订单编号:">
<el-input size="large" v-model.trim="queryInfo.order_no" placeholder="请输入订单编号" :prefix-icon="Search"
  @change="searchTable"></el-input>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="6">
            <el-form-item prop="dates" label="日期范围:">
              <el-date-picker v-model="queryInfo.dates" type="daterange" size="large" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" @change="changeDate" />
            </el-form-item>
          </el-col> -->

          <el-col :span="6">
            <el-form-item prop="status" label="订单状态:">
              <Select width="240" placeholder="请选择订单状态" v-model="queryInfo.pay_status" :data="payStatus"
                @change="searchTable" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <div class="flex justify-end align-center">
              <!-- <el-button type="primary" @click="searchClick" size="large">查询</el-button> -->
              <el-button type="info" :icon="RefreshRight" size="large" @click="resetTable">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="margin-top">
      <el-table ref="multipleTableRef" :data="listData" style="width: 100%">
        <el-table-column type="selection" width="55" />

        <el-table-column property="order_no" label="订单编号"></el-table-column>
        <el-table-column label="实际付款情况" width="150">
          <template #default="scope">
            <div>订单价：{{ scope.row.OrderPayOne?.pay_money }}</div>
            <div>手续费：{{ scope.row.OrderPayOne?.fee_money }}</div>
            <div>到账：{{ scope.row.OrderPayOne?.net_money }}</div>
          </template>
        </el-table-column>
<!--        <el-table-column label="销售金额">-->
<!--          <template #default="scope">-->
<!--            <div>¥{{ scope.row.order_money }}</div>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column property="create_time" label="业务员金额">
          <template #default="scope">
            <div>¥ {{ scope.row.commission || 0 }}</div>
            <div>¥ {{ (scope.row.commission_rate).toFixed(0) || 0}}%</div>
          </template>
        </el-table-column>
<!--        <el-table-column property="order_no" label="商品信息">-->
<!--          <template #default="scope">-->
<!--            <div>商品名称：{{ scope.row.goods_name }}</div>-->
<!--            <div>商品类别: {{ scope.row.goods_type_name }}</div>-->
<!--            <div>商品价格: ¥{{ scope.row.one_money }}</div>-->
<!--            <div>商品数量： {{ scope.row.order_number }}</div>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column label="销售金额">
          <template #default="scope">
            <div>¥{{ scope.row.order_money }}</div>
          </template>
        </el-table-column>

<!--        <el-table-column property="create_time" label="佣金金额">-->
<!--          <template #default="scope">-->
<!--            <div>¥{{ scope.row.commission }}</div>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column property="status" label="状态">
          <template #default="scope">
            <template v-for="item in payStatus">
              <el-tag class="ml-2" :key="item.id" :color="'#FFF'" v-if="scope.row.pay_status === item.value">
                {{ item.label }}
              </el-tag>
            </template>
          </template>
        </el-table-column>

        <el-table-column label="佣金结算">
          <template #default="scope">
            <div :style="{ color: scope.row.is_user == 0 ? 'red' : '#4ce979' }">{{ scope.row.is_user == 0 ? '未结算' :
              '已结算' }}</div>
          </template>
        </el-table-column>


        <el-table-column property="create_time" label="日期" />

        <!-- <el-table-column label="操作" width="300">
        <template #default="scope">
          <div class="flex align-center">
            <el-button
              class="margin-left-xs"
              size="small"
              type="danger"
              @click="viewOrderDetail(order)"
              >查看详情</el-button
            >
          </div>
        </template>
      </el-table-column> -->
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="margin-top">
      <Pagination :total="total" @change="changePage" />
    </div>

    <!-- 产品表单模态框 -->
    <ProductFormModal v-model:visible="productModalVisible" :productData="currentProduct" :isEdit="isEditMode"
      @submit="handleProductSubmit" />

    <!-- 添加价格弹窗 -->
    <ProductPriceFormModal ref="productPriceFormModalRef" @reload="searchTable" />
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { ref, reactive, computed, toRef, onMounted, watch } from 'vue'
import Select from '@/components/admin/Select.vue'
import { useRoute } from 'vue-router'
import useTableHook from '@/hooks/useTableHook'
import { GetOrderDoneDataListApi } from '@/api/index'
import { RefreshRight } from '@element-plus/icons-vue'
import ProductFormModal from '@/components/admin/merchants/ProductFormModal.vue'
import ProductPriceFormModal from '@/components/admin/merchants/ProductPriceFormModal.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Pagination from '@/components/admin/Pagination.vue'

const props = defineProps({
  userId: {
    type: String,
    default: ''
  }
})

const payStatus = [
  {
    label: '全部',
    value: "",
    color: '#ff40a0'
  },
  {
    label: '待付款',
    value: 0
  },
  {
    label: '付款成功',
    value: 2
  },
]

const statusData = [
  {
    label: '全部状态',
    value: ''
  },
  {
    label: '待发货',
    value: 0,
    color: '#f4f4f5'
  },
  {
    label: '发货中',
    value: 1,
    color: '#409eff'
  },
  {
    label: '代签收',
    value: 2,
    color: '#e6a23c'
  },
  {
    label: '已签收',
    value: 3,
    color: '#66c03a'
  },
  {
    label: '结束订单',
    value: 4,
    color: '#909399'
  },
  {
    label: '取消订单',
    value: 5,
    color: '#f56c6c'
  }
]

const payStatusData = [
  {
    label: '待付款',
    value: 0,
    color: ''
  },
  {
    label: '付款成功',
    value: 2,
    color: '#409eff'
  },
  {
    label: '取消付款',
    value: 3,
    color: '#e6a23c'
  },
]
const queryInfo = ref({
  pay_status: '',
  page: 1,
  limit: 10,
})

const searchFormRef = ref<FormInstance>()

// 重置表格
const resetTable = () => {
  searchFormRef.value.resetFields()

  queryInfo.shopId = props.userId

  queryInfo.value.start_time = ''

  queryInfo.value.end_time = ''

  searchTable()
}

const changeDate = (record) => {
  queryInfo.value.start_time = queryInfo.value.dates[0]
  queryInfo.value.end_time = queryInfo.value.dates[1]
  searchTable()
}

onMounted(() => {
  // queryInfo.value.shopId = props.userId

  initTable()
})


const {
  total,
  allData,
  listData,
  searchTable,
  initTable,
  changePage,
} = useTableHook(queryInfo.value, GetOrderDoneDataListApi, { resType: 3 })


watch(allData, (newVal) => {
  console.log(10000, newVal);

  emit('loadData', newVal)
}, {
  deep: true
})

const emit = defineEmits(['loadData'])
</script>

<style lang="scss" scoped>
/* 头部区域样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.title-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
}

.merchant-name {
  color: #e74c3c;
}

.back-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #7f8c8d;
  text-decoration: none;
  transition: color 0.3s;
  margin-top: 5px;
}

.back-link:hover {
  color: #e74c3c;
}

.back-link i {
  margin-right: 5px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.btn-primary {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 600;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #c0392b;
}

.btn-primary i {
  margin-right: 5px;
}
</style>
